<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title><%--
  Created by IntelliJ IDEA.
  User: ausu
  Date: 2019/10/13
  Time: 21:04
  To change this template use File | Settings | File Templates.
--%>
    <!DOCTYPE html>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
        <%
    String basePath = request.getScheme()+"://"+request.getServerName()+":"
            +request.getServerPort()+request.getContextPath()+"/";
%>
    <html>
    <head>
        <base href="<%=basePath %>" />
        <meta charset="UTF-8">
        <title>部门信息</title>
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
        <link rel="stylesheet" href="css/messageBox.css" />
        <script src="js/jquery-3.4.1.min.js"></script>
        <script src="js/messageBox.js" charset="UTF-8"></script>
        <style>
            header {
                position: relative;
                width: 100%;
                margin-top: 2px;
            }
            header ul li:first-child {
                margin-left: 15px;
            }
            article {
                position: relative;
                width: 90%;
                min-width: 900px;
                margin: 50px auto 0px;
            }
            article .search {
                position: relative;
                width: 100%;
                margin-bottom: 5px;
                text-align: right;
            }
            article .search section {
                display: inline-block;
                width: 300px;
                text-align: right;
            }
            article section.btns section {
                height: 40px;
                line-height: 40px;
            }
            article section.btns section:nth-child(2) {
                text-align: center;
            }
            article section.btns section:last-child ul{
                height: 26px;
                line-height: 26px;
                text-align: right;
                margin: 0px;
                padding: 0px;
            }
            article section.btns section:last-child ul li {
                margin-top: 0px;
            }
            article table tr:first-child{
                font-weight: bold !important;

            }
            article table tr td{
                text-align: center !important;
            }

        </style>
        <script>
            //全选
            $(function() {
                $("#selectAll").click(function() {
                    $(":checkbox[name=departmentId]").prop("checked", this.checked);
                });
            });

            function submitFormUdp() {
                //获得选择的行数，选中复选框的数量
                var count = $("#form1 input[name=departmentId]:checked").length;
                //判断是否未选择1行
                if(count==0) {
                    parent.alert("提示","请至少选择1行数据修改!");
                    return;
                } else if(count > 1) {
                    parent.alert("提示","只能选择1行数据修改!");
                    return;
                } else {
                    var form = $("#form1").get(0);
                    form.action = "updDepartmenView.html?num=${page.pageNum}";
                    form.submit();
                }
            }
            function submitFormAdd() {
                var form = $("#form1").get(0);
                form.action = "addDepartmenView.html?num=${page.pageNum}";
                form.submit();
            }
            function submitFormDel() {
                //获得选择的行数，选中复选框的数量
                var count = $("#form1 input[name=departmentId]:checked").length;
                //判断是否未选择1行
                if(count==0) {
                    parent.alert("提示","请至少选择1行数据删除!");
                    return;
                } else {
                    //弹出选择对话框：是否删除
                    if(parent.confirm("提示","您是否要删除选中的行?",function () {
                        //动态提交表单
                        var form = document.getElementById("form1");
                        form.action = "departmenDel.html";
                        form.submit();
                    }));
                }
            }
            /*搜索*/
            function searchHome(num) {
                var pageNum = $(".pager input[id=pageNum]")
                if (num == 1){
                    pageNum.prop("value",1);
                } else if (num == 2) {
                    pageNum.prop("value",${page.pageNum-1});
                } else if (num == 3) {
                    pageNum.prop("value",<c:if test='${page.hasNextPage}'>${page.pageNum+1}</c:if><c:if test='${ !page.hasNextPage}'>${page.pages}</c:if>);
                } else if (num == 4) {
                    pageNum.prop("value",${page.pages});
                }
                var form = document.getElementById("form1");
                form.action = "departmenSearch.html";
                form.submit();
            }
            /*查询分页展示*/
            function queryHome(num) {
                var pageNum = $(".pager input[id=pageNum]")
                if (num == 1){
                    pageNum.prop("value",1);
                } else if (num == 2) {
                    pageNum.prop("value",${page.pageNum-1});
                } else if (num == 3) {
                    pageNum.prop("value",<c:if test='${page.hasNextPage}'>${page.pageNum+1}</c:if><c:if test='${ !page.hasNextPage}'>${page.pages}</c:if>);
                } else if (num == 4) {
                    pageNum.prop("value",${page.pages});
                }
                var form = document.getElementById("form1");
                form.action = "departmenQurey.html";
                form.submit();
            }
        </script>
    </head>
<body>
<header>
    <ul class="nav nav-tabs">
        <li role="presentation" class="active"><a href="departmenQurey.html?pageNum=1">部门列表</a></li>
    </ul>
</header>
<article>
    <section class="search">
        <form method="post" action="departmenSearch.html" class="form-inline">
            <section class="form-group">
                <input type="text" name="searchContext" placeholder="请输入部门名搜索!" class="form-control" value="${searchContext}" <%--<c:if test="${searchContext ne ''}">value="${searchContext}" </c:if>--%> />
                <input type="hidden" name="pageNum" value="1" />
                <input type="submit" value="搜索" class="btn btn-warning" />
            </section>
        </form>
    </section>
    <form id="form1" method="post" action=#" class="form-inline">
        <table class="table table-bordered table-hover">
            <tr>
                <td><input type="checkbox" name="selectAll" id="selectAll" /></td>
                <td>序号</td>
                <td>部门名称</td>
                <td>部门描述</td>
                <td>操作时间</td>
            </tr>
            <c:forEach items="${page.list}" var="department" varStatus="st">
                <tr>
                    <td><input type="checkbox" name="departmentId"  value="${department.departmentId}"/></td>
                    <td>${st.count}</td>
                    <td>${department.departmentName}</td>
                    <td>${department.departmentDescribe}</td>
                    <td>${department.operTime}</td>
                </tr>

            </c:forEach>
            <c:if test="${fn:length(page.list)==0}">
                <tr>
                    <td colspan="12" align="center">未查找到数据!</td>
                </tr>
            </c:if>
        </table>
        <section class="row btns">
            <section class="col-xs-12 col-sm-4">
                <section>
                    <input type="button" value="添 加" onclick="submitFormAdd()" class="btn btn-success"  />
                    <input type="button" value="修 改" onclick="submitFormUdp()" class="btn btn-success"  />
                    <input type="button" value="删 除" onclick="submitFormDel()" class="btn btn-danger" />
                </section>
            </section>
            <section class="col-xs-12 col-sm-4">共-${page.total}-行 共-${page.pages}-页 当前第-${page.pageNum}-页</section>
            <section class="col-xs-12 col-sm-4">
                <ul class="pager">
                    <input type="hidden" name="pageNum" id="pageNum" />
                    <c:choose>
                        <c:when test="${operating eq 'search'}">
                            <input type="hidden" name="searchContext" value="${searchContext}"/>
                            <li>
                                <a href="javascript:void(0);" id="home" onclick="searchHome(1)" data-value="首页">首&emsp;页</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);" id="up" onclick="searchHome(2)">上一页</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);" id="down" onclick="searchHome(3)">下一页</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);" id="last" onclick="searchHome(4)">尾&emsp;页</a>
                            </li>
                        </c:when>
                        <c:otherwise>
                            <li><a href="javascript:void(0);" onclick="queryHome(1)">首&emsp;页</a></li>
                            <li><a href="javascript:void(0);" onclick="queryHome(2)">上一页</a></li>
                            <li><a href="javascript:void(0);" onclick="queryHome(3)">下一页</a></li>
                            <li><a href="javascript:void(0);" onclick="queryHome(4)">尾&emsp;页</a></li>
                        </c:otherwise>
                    </c:choose>
                </ul>
            </section>
        </section>
    </form>
</article>
<div id="dialogShadow">
    <div id="dialog">
        <p class="dialog-title">提示</p>
        <p class="dialog-message">......</p>
        <p class="dialog-btns">
            <input type="button" value="确 定" class="btn btn-primary input-sm" />
        </p>
    </div>
</div>
</body>
</html>
